﻿<!DOCTYPE HTML>
<html>
<head>
    <title>Smith Calendar Demo</title>
    <link href="smithcalendar.css" rel="Stylesheet" type="text/css" />
    <script src="smithcalendar.js" type="text/javascript"></script>
    <style type="text/css">
    body{ color:#393939; font-family: 'Segoe UI', Verdana, Arial, Tahoma; font-size: 13px; margin:0; padding:10px 20px; }
    h1,h2,h3,h4,h5,h6{ line-height:normal; margin:0; } h1{ font-size:18px; padding:8px 0; } h3{ font-size: 13px; padding:5px 0; } p{ margin:0; padding:3px 0; }
    input{ margin:5px; padding:2px 3px; } span{ margin-right:10px; }
    .section{ border-bottom:1px dashed #efefef; margin:5px 0 0 0; padding:10px 0; }
    .code{ background:#efefef; color:#090909; font-family:Consolas, 'Courier New'; font-size:12px; display:block; line-height:20px; margin:5px 0; padding:8px; }
    .footer{ margin:20px 0 160px 0;}
    </style>
</head>
<body>
    <h1>Smith Calendar</h1>
    <p>
        <span>Author: John Smith</span>
        <span>Version: 1</span>
        <span>License: GPL</span>
    </p>
    <div>
        <p>Smith Calendar is to show a grid under the input text to pick up date and time.</p>
        <p>To use this control, first include the css file &quot;smithcalendar.css&quot; and javascript file &quot;smithcalendar.js&quot; in the head of your html page.</p>
        <div class="code">        
            &lt;link href=&quot;smithcalendar.css&quot; rel=&quot;Stylesheet&quot; type=&quot;text/css&quot; /&gt;<br />
            &lt;script src=&quot;smithcalendar.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
        </div>
    </div>
    <div class="section">
        <h3>Example 1</h3>
        <p>To use a input text to pick up date, call SmithCalendar.show() function in onclick event and pass in the id of that element:</p>
        <div class="code">&lt;input id=&quot;f1&quot; readonly=&quot;readonly&quot; onclick=&quot;SmithCalendar.show(&#39;f1&#39;);&quot; /&gt;</div>
        <div>
            <strong>Date: </strong>
            <input id="f1" readonly="readonly" onclick="SmithCalendar.show('f1');" />
        </div>
    </div>
    <div class="section">
        <h3>Example 2</h3>
        <p>To set an initial date, set the value attribute of the input element:</p>
        <div class="code">&lt;input id=&quot;f2&quot; value=&quot;2011-06-01&quot; readonly=&quot;readonly&quot; onclick=&quot;SmithCalendar.show(&#39;f2&#39;);&quot; /&gt;</div>
        <div>
            <strong>Date: </strong>
            <input id="f2" value="2011/06/01" readonly="readonly" onclick="SmithCalendar.show('f2');" />
        </div>
    </div>
    <div class="section">
        <h3>Example 3</h3>
        <p>To pick up both date and time, set the second parameter ets(enable time selection) to true when calling SmithCalendar.show():</p>
        <div class="code">&lt;input id=&quot;f3&quot; readonly=&quot;readonly&quot; onclick=&quot;SmithCalendar.show(&#39;f3&#39;,true);&quot; /&gt;</div>
        <div>
            <strong>Date &amp; Time: </strong>
            <input id="f3" readonly="readonly" onclick="SmithCalendar.show('f3',{ets:true});" />
        </div>
    </div>
    <div class="footer">        
        <p><strong>Any help and suggestion for improving this control is welcome!</strong></p>
        <p>you can contact me with this email: <a href="mailto:john.smith.17th@gmail.com">john.smith.17th@gmail.com</a></p>
        <p>Last edit at 2011/07/04 by John Smith.</p>
    </div>
</body>
</html>
